<template>
<div class="zone">
  <chart-zone>
  </chart-zone>
  <div class="nav_group">
    <van-row type="flex" justify="center" gutter="30" tag="div">
      <van-col span="4">
        <router-link to="/queryDetails">
          <div class="nav_img">
            <img src="../../assets/img/nav1.png" alt="">
          </div>
          <div class="nav_name">月经营</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="/queryDetails">
          <div class="nav_img">
            <img src="../../assets/img/nav2.png" alt="">
          </div>
          <div class="nav_name">日经营</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="/target">
          <div class="nav_img">
            <img src="../../assets/img/nav3.png" alt="">
          </div>
          <div class="nav_name">专题分析</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav4.png" alt="">
          </div>
          <div class="nav_name">数据管理</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav5.png" alt="">
          </div>
          <div class="nav_name">财务管理</div>
        </router-link>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center" gutter="30" tag="div">
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav6.png" alt="">
          </div>
          <div class="nav_name">精确管理</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav7.png" alt="">
          </div>
          <div class="nav_name">多维分析</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav8.png" alt="">
          </div>
          <div class="nav_name">固定报表</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav9.png" alt="">
          </div>
          <div class="nav_name">稽核管理</div>
        </router-link>
      </van-col>
      <van-col span="4">
        <router-link to="">
          <div class="nav_img">
            <img src="../../assets/img/nav10.png" alt="">
          </div>
          <div class="nav_name">敬请期待</div>
        </router-link>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
import ChartZone from "./components/MapZone.vue"//地图轮播组件
require('echarts/map/js/china.js')  //引入china.js地图文件
import axios from 'axios'
export default {
  name: 'home',
  components: { ChartZone }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .zone{
    background-color: #F2F2F2;
    height: 1334px;
  }
  .nav_group{
    margin-top: 22px;
    background-color: #fff;
    height: 479px;
    padding: 42px 0px;
    text-align: center;
  }
  .nav_group>div{
    margin-bottom: 26px;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .nav_img{
    height: 92px;
    margin-bottom: 13px;
  }
  .nav_name{
    height:34px;
    font-size:25px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:34px;
    white-space: nowrap;
  }
</style>
